<!DOCTYPE html>
<html>
	<head>
		<!-- 语义标签 -->
		<meta charset="utf-8" />
		<title>CQUT11923040212-孙煜琳</title>
		<link rel="icon" href="./images/logo.png" type="image/x-icon">
		<link herf="./css/main.css" type="text/css" rel="stylesheet" >
		<!-- 内部样式表 -->
		<style type="text/css">
			body {
				background-color: rgba(255, 0, 0, 0.055);
			}
			/* solid  dashed  dotted  double */
			/* p{
				height: 120px ;
				font-size: 80px;
				text-align: center;
				margin-left: 40px;
				border: 20px dotted  rgba(234, 135, 223, 0.534) 
			} */
			#welcome{
				/* CSS盒模型 */
				height: 120px ;
				font-size: 100px;
				text-align: center;
				border: 1px solid rgb(234, 135, 201) ;
				/* padding: 100px;
				margin: 200px; */
			}
			/* 类选择器 */
			.left {
				text-align:left;
			}
			/* 类名为 welwel 的 p 标签 */
			p[name="welwel"] { 
				height: 120px ;
				font-size: 80px;
				text-align: center;
				margin-left: 40px;
				border: 20px dotted  rgba(234, 135, 223, 0.534)
			}

			/* CSS 选择器 */
			/* 标签选择器 */
			h2{ color:#ff33cc }
			h3{ color:#ff66cc}
			h4{ color:#ff99cc}
			h5{ color:#ff9999 }
			h6{ color:#ffcccc}

			/* 属性选择器 */
			input[type="text"]{
				width:80px;
				border: 3px solid rgb(62, 116, 129) ;
			}
			/* 鼠标悬停样式 */
			a:hover {
				 text-decoration: underline;
				}
			.title {
				zoom: 1.5;
			}
		</style>
	</head>
	<body>
		<header style="height: 120px; text-align: center; font-size: 100px; background-color: rgb(234, 135, 201)">
			Welcome to my new world</header>

		<!-- 区块标签 [包含特殊符号]-->
		<div id="welcome"  >&copy Welcome to my new world</div>
		<p name="welwel" >！！！welwel！！！</div>
		<p name="welwel">你好，欢迎来到<span style="color: red">前端世界</span>！</p>
		<p name="welwel">我将给你带来<span style="color: red">不一样的体验</span>！</p>

		<!-- 内联样式 -->
		<p style="height: 50px; text-align: center; font-size: 40px; border: 5px dashed #FFEC8B">
		======== 标题标签 ========</p>
		<h1 style="color:#ff00cc;font-size: 80px">非常有趣的说！！！</h1>
		<!-- 标题标签 -->
		<div class="title">
			<h2 style="font-size: 70px">非常有趣的说！！！</h2>
			<h3 style="font-size: 60px">非常有趣的说！！！</h3>
			<h4 style="font-size: 50px">非常有趣的说！！！</h4>
			<h5 style="font-size: 40px">非常有趣的说！！！</h5>
			<h6 style="font-size: 30px">非常有趣的说！！！</h6>
		</div>

		<!-- 超链接标签 -->
		<a href="https://gitee.com/yulinmeinv/cqut11923040212" target="_blank"
		style="font-size: 70px">我的git仓库</a>

		<!-- 图像标签 -->
		<p style="height: 50px; text-align: center; font-size: 40px; border: 5px dashed #FFEC8B">
		======== 图像标签 ========</p>
		<p><img src="pink.png" alt="BrandLogo" /></p>
		<!-- / 正斜杠 【相对路径】-->
		<img src="./images/logo.png" />
		<!-- \\ 转移字符 【绝对路径】 局部不能代表全局 -->
		<img src="D:\\Homework\\PojectCode\\cqut11923040212\\6.14\\images\\logo.png" />
		<p>
			<img src="http://www.sfac.xyz:8000/images/course/1651480431413.jpg" alt="这是一张图片" />
		</p>

		<p style="height: 50px; text-align: center; font-size: 40px; border: 5px dashed #FFEC8B">
		==== 表单标签 ====</p>
		<form action="/register" metdod="post" enctype="text/plain"></form>
		<form action="#">
			<input type="hidden" id="userId" name="userName" value="1" />
			<p>
				<label for="username">用户名</label>
				<input type="text" id="userId" name="userName" value="SunYuLin" required />
				<input type="text" id="userId" name="userName" value="SunYuLin" readonly />
				<input type="text" id="userId" name="userName" value="SunYuLin" disabled />
			</p>
			<p>
				<input type="password" id="password" name="password" />
			</p>
			<p>
				<label for="sex">性别</label>
				<input type="radio" name="sex" value="female" checked /> 女
				<input type="radio" name="sex" value="male" />男
			</p>
			<p>
				<label for="love">爱好</label><br />
				<input type="checkbox" name="love" value="看动漫" />看动漫
				<input type="checkbox" name="love" value="看小说" checked />看小说<br />
				<input type="checkbox" name="love" value="看漫画" />看漫画
				<input type="checkbox" name="love" value="看漫展" />看漫展<br />
				<input type="checkbox" name="auto" ckecked />
				<input type="checkbox" name="memory" ckecked="ckecked" />
			</p>
			<p>
				<select id="city" name="city">
					<option value="重庆">重庆</option>
					<option value="成都" selected>成都</option>
					<option value="乐山">乐山</option>
					<option value="桂林">桂林</option>
					<option value="武汉">武汉</option>
					<option value="长沙">长沙</option>
				</select>
			</p>
			<p>
				<!-- 多行文本框 -->
				<p>多行文本框：</p>
				<textarea name="desc" id="desc" rows="3" cols="20"></textarea><br />
			</p>
			<p>
				<!-- 文件选择框 -->
				文本选择框：<input type="file" name="img" /><br />
			</p>
			<p>
				<!-- 全局作用的按钮 -->
				按钮：
				<input type="button" name="btn01" value="按钮" />
				<input type="reset" name="btn02" value="重置" />
				<input type="submit" name="btn03" value="提交" />
			</p>
			<p>
				<!-- 基本输入 -->
				日期选择框：<input type="date" name="curentDate" /><br />
				数值选择框：<input type="number" min="1" max="10" step="2" /><br />
				邮件输入框：<input type="email" name="email" /><br />
			</p>
			<p>
				<!-- 基本输入 -->
				按钮：
				<button type="button">注册</button>
				<button type="reset">重置</button>
				<button type="submit">登陆</button>
			</p>
			<p>
			<input list="browsers" />
			<datalist id="browsers">
				<option value="Internet Explorer"></option>
				<option value="Firefox"></option>
				<option value="Chrome"></option>
				<option value="Opera"></option>
				<option value="Safari"></option>
			</datalist>
			</p>
			<p>
				<input list="dl" />
				<datalist id="dl">
					<option value="SunYuLin">孙煜琳</option>
					<option value="LinYuSun">琳煜孙</option>
					<option value="HuangHun">黄昏</option>
					<option value="ANiYa">阿尼亚</option>
					<option value="YueEr">约尔</option>
				</datalist>
			</p>
			<p>
				<input list="dl" />
				<datalist id="dl">
					<option value="孙煜琳"></option>
					<option value="琳煜孙"></option>
					<option value="黄昏"></option>
					<option value="阿尼亚"></option>
					<option value="约尔"></option>
				</datalist>
			</p>
			<table>
				<tr>
					<th>号码</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
				<tr>
					<td>1</td>
					<td>SunYuLin</td>
					<td>14</td>
				</tr>
				<tr>
					<td>2</td>
					<td>LinYuSun</td>
					<td>41</td>
				</tr>
				<tr>
					<td>3</td>
					<td>HuangHun</td>
					<td>16</td>
				</tr>
				<tr>
					<td>4</td>
					<td>ANiYa</td>
					<td rowspan="2">￥800</td>
				</tr>
				<tr>
					<td>5</td>
					<td>YueEr</td>
					<td colspan="3">余额: ￥1200</td>
				</tr>
			</table>
			<p style="height: 50px; text-align: center; font-size: 40px; border: 5px dashed #FFEC8B">
			======== 列标标签 ========</p>
			<!-- 无序列标 -->
			<ul type="square">
				<li>Coffee</li>
				<li>Tea</li>
				<li>Milk</li>
			</ul>
			<!-- 有序列标 -->
			<ol start="1">
				<li>这是一只小猫</li>
				<li>这是一只小汪</li>
				<li>这是一只土豆</li>
				<li>这是一只小叽</li>
			</ol>
			<!-- 定义列标(多级缩进) -->
			<dl>
				<dt>一级标签</dt>
				<dd>二级标签</dd>
				<dd>二级标签</dd>
				<dd>二级标签</dd>
				<dd>二级标签</dd>
				<dd>二级标签</dd>
			</dl>
			<p style="height: 50px; text-align: center; font-size: 40px; border: 5px dashed #FFEC8B">
				======== 视频标签 ========</p>
			<video
				src="http://www.sfac.xyz:8000/videos/study/sfac/Python_Base_02.mp4"
				width="800px"
				height="400px"
				controls="controls"></video>

			<p style="height: 50px; text-align: center; font-size: 40px; border: 5px dashed #FFEC8B">
			======== 音频标签 ========</p>
			<audio src="20.mp3" controls="controls"></audio>

			<p style="height: 50px; text-align: center; font-size: 40px; border: 5px dashed #FFEC8B">
				======== 特殊符号 ========</p>
			<p style=" font-size: 50px">&lt &gt &amp &quot &reg &copy &trade &ensp &emsp &nbsp </p>
			
			
		</form>
		<footer style="height: 130px;text-align: center; background-color: #FFE4E1; font-size: 50px; border: 30px dashed #FFEC8B">
		有问题请拨打联系电话：17782039833
		</footer>
	</body>
</html>
